<template>
  <el-dialog title="修改工程描述" :visible.sync="showDetail.updateProjectDetail" align="center">
    <div style="height:270px; overflow: auto">
      <el-form ref="projectDetail" :rules="rules" :model="projectDetail" label-width="100px">
        <el-form-item label="工程名称">
          <el-input :value="projectDetail.projectName" :disabled="true" />
        </el-form-item>
        <el-form-item label="工程描述" prop="projectDesc">
          <el-input
            v-model="projectDetail.projectDesc"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 8}"
            :maxlength="500"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="showDetail.updateProjectDetail=false">取消</el-button>
      <el-button :disabled="disabled" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'UpdateProjectDetailDialog',
  data() {
    return {
      rules: { // 校验规则
        projectDesc: [
          { required: true, message: '请输入描述信息', trigger: 'blur' },
          { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ]
      },
      disabled: false, // 确认按钮点击后并不能重复点击
      projectDetail: {
        projectName: '', // 工程名
        projectDesc: ''// 描述信息
      }
    }
  },
  computed: {
    flowData: function() {
      return this.$store.state.project.flowData
    },
    showDetail: function() { // 弹出框是否显示
      return this.$store.state.project.projectMenuModel.showDetail
    },
    rightContentTargetItem: function() {
      return this.flowData.rightContentTargetItem
    },
    currentProjectDetail: function() {
      return this.flowData.currentProjectDetail
    },
    updateProjectDetail() {
      return this.showDetail.updateProjectDetail
    }
  },
  watch: {
    updateProjectDetail(val) {
      if (val) {
        this.projectDetail.projectName = this.rightContentTargetItem.project ? this.rightContentTargetItem.project.name : ''
        this.projectDetail.projectDesc = this.rightContentTargetItem.project.description
      } else {
        this.projectDetail.projectDesc = ''
      }
    }
  },
  methods: {
    submitForm(formName) { // 确认
      this.disabled = true
      this.$refs.projectDetail.validate((valid) => {
        if (valid) {
          this.updateProject()
        } else {
          console.log('error submit!!')
          this.disabled = false
          return false
        }
      })
    },
    updateProject() {
      var that = this
      this.$.ajax({
        url: that.$store.state.global.httpServer + '/api/project/modify/' + that.rightContentTargetItem.project.id + '/desc?desc=' + that.projectDetail.projectDesc,
        method: 'patch',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        beforeSend: function(xhr) {
          xhr.setRequestHeader('accessToken', localStorage.accessToken)
        },
        success: function(data) {
          switch (data.status) {
            case 'SUCCESS':
              that.$notify({
                title: '提示',
                type: 'success',
                message: data.message
              })
              that.$store.dispatch('getMenuProjectList', 3)// 重新加载父目录下子目录
              that.showDetail.updateProjectDetail = false
              if (that.currentProjectDetail.id == that.rightContentTargetItem.project.id) {
                that.currentProjectDetail.description = that.projectDetail.projectDesc
              }
              break
            case 'FAIL':
              that.$notify.error({
                title: '提示',
                message: data.message
              })
              break
          }
        },
        error: function(data) {
          that.$store.commit('dealRequestError', data)
        },
        complete: function(data) {
          that.disabled = false
        }
      })
    }
  }
}
</script>
